//
// Media
// --------------------------------------------------

.media-box-chat { 
  background-color: $media-chat-bg;
  @include align-items(flex-start)

  .media-box-chat__hd {
    width: $media-chat-hd-size;
    height: $media-chat-hd-size;
    line-height: $media-chat-hd-line-height;
    border-radius: $border-radius-base;
    overflow: hidden;
  }
}

.media-box-chat__title {
  font-weight: 500;
  font-size: $media-chat-title-font-size;
  color: $media-chat-title-color;
  line-height: $media-chat-title-line-height;
  @include flexbox;

  .media-box-chat__title-inner {
    @include flex();
  }

  .media-box-chat__title-right {
    float: right;
    margin-left: .8em;
    font-weight: 400;
    font-size: $media-chat-title-font-size - 2;
    color: lighten($media-chat-title-color, 20%);
    line-height: $media-chat-title-font-size * $media-chat-title-line-height / ($media-chat-title-font-size - 2)
  }
}

.media-box-chat__desc {
  color: $media-chat-desc-color;
  font-size: $media-chat-desc-font-size;
  -webkit-line-clamp: initial;
  word-wrap: break-word;
  word-break: break-all;
}

.media-box-chat__desc--center {
  text-align: center;
  font-size: $media-chat-desc-font-size - 2;
  color: lighten($media-chat-desc-color, 20%);
}

.media-box-chat__desc-thumb {
  max-width: 80%;
  overflow: hidden;

  > img {
    display: block;
    width: 100%;
    vertical-align: top;
  }
}

.media-box-chat__desc > .media-box-card {
  width: 80%;
}

.media-box-card {
  display: block;
  overflow: hidden;
  background-color: $media-card-bg;

  > [class^="media-box-card"] {
    position: relative;
    padding-left: $media-card-padding;
    padding-right: $media-card-padding;
    border-left: 1px solid $media-card-border-color;
    border-right: 1px solid $media-card-border-color;
    overflow: hidden;

    &:first-child {
      padding-top: $media-card-padding;
      border-top-left-radius: $media-card-border-radius;
      border-top-right-radius: $media-card-border-radius;
      border-top: 1px solid $media-card-border-color;
    }

    &:last-child {
      border-bottom-left-radius: $media-card-border-radius;
      border-bottom-right-radius: $media-card-border-radius;
      border-bottom: 1px solid $media-card-border-color;
    }
  }
}


.media-box-card__hd {
  padding-top: $media-card-padding / 2;
  padding-bottom: $media-card-padding / 2;
}

.media-box-card__title {
  overflow: hidden;
  font-size: $media-card-title-font-size;
  font-weight: 500;
  color: $media-card-title-color;
  line-height: $line-height-base;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
}

.media-box-card__bd {
  position: relative;
  padding: 0 $media-card-padding $media-card-padding;
  overflow: hidden;
  @include flexbox; 
  @include align-items(flex-start);

  .media-box-card__desc {
    @include flex();
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: $media-card-desc-color;
    font-size: $media-card-desc-font-size;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;

    + .media-box-card__thumb {
      margin-left: $media-card-padding;
    }
  }

  .media-box-card__thumb {
    width: $media-card-thumb-size;
    height: $media-card-thumb-size;
    line-height: $media-card-thumb-size;

    > img {
      width: 100%;
    }

    + .media-box-card__desc {
      margin-left: $media-card-padding;
    }
  }
}

.media-box-card__ft {
  border-top: 1px solid $media-card-border-color;
  font-size: $media-card-ft-font-size;
  color: $media-card-ft-color;
  line-height: $line-height-base;
  font-weight: 300;

  .iconfont {
    font-size: $media-card-ft-font-size + 2;
  }
}

.media-box-card__img {
  position: relative;
  overflow: hidden;
  height: 160px;
  border-top: 1px solid $media-card-border-color;

  > img {
    position: absolute;
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .media-box-card__img-caption {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    padding: $media-card-padding / 2 $media-card-padding;
    background-color: rgba(0, 0, 0, .7);
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.meida-box-recommendation {
  padding: 0;
}

.media-box-recommendation__hd {
  width: $media-recommendation-hd-size;
  height: $media-recommendation-hd-size;
  overflow: hidden;
}


